<template>
  <view class="article-banner">
    <swiper
      class="banner-swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      circular
    >
      <swiper-item
        v-for="(item, index) in bannerList"
        :key="index"
        @tap="handleBannerClick(item)"
      >
        <view class="swiper-item-wrapper">
          <image
            class="banner-image"
            :src="item.picUrl"
            mode="aspectFill"
          />
          <view class="image-overlay"></view>
          <view class="article-title">{{ item.title }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import BannerApi from '@/sheep/api/promotion/banner';

const bannerList = ref([]);

// 获取轮播图列表
const fetchBannerList = async () => {
  try {
    const response = await BannerApi.getBannerList(1);
    
    if (response.code === 0 && response.data) {
      bannerList.value = response.data;
    }
  } catch (error) {
    console.error('获取轮播图列表失败:', error);
  }
};

// 处理轮播图点击
const handleBannerClick = async (banner) => {
  try {
    // 增加点击数量
    await BannerApi.addBrowseCount(banner.id);
    
    // 跳转到对应URL
    if (banner.url) {
      // 判断是否是网络地址
      if (banner.url.startsWith('http://') || banner.url.startsWith('https://')) {
        // 打开网址
        uni.navigateTo({
          url: `/pages/public/webview?url=${encodeURIComponent(banner.url)}`
        });
      } else {
        // 跳转到页面路径
        uni.navigateTo({
          url: banner.url
        });
      }
    }
  } catch (error) {
    console.error('处理轮播图点击失败:', error);
  }
};

onMounted(() => {
  fetchBannerList();
});
</script>

<style lang="scss" scoped>
.article-banner {
  width: 100%;
  height: 320rpx;
  margin: 20rpx 0;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.banner-swiper {
  width: 100%;
  height: 100%;
}

.swiper-item-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.article-title {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  right: 20rpx;
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

:deep(.uni-swiper-dots) {
  bottom: 20rpx;
}

:deep(.uni-swiper-dot) {
  width: 8rpx;
  height: 8rpx;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  margin: 0 6rpx;
}

:deep(.uni-swiper-dot-active) {
  width: 24rpx;
  background: #ffffff;
  border-radius: 4rpx;
}
</style> 